window.onload = function () {
    leftSwipe();
    rightSwipe();

}

function leftSwipe() {
    //获取元素
    var parentBox = document.querySelector('.jd_category_left');
    var childBox = parentBox.querySelector('ul');
    var parentHeight = parentBox.offsetHeight;
    var childHeight = childBox.offsetHeight;

    //定义初始位置 也就是最大的位置
    var maxY = 0;
    //定义最小的位置
    var minY = parentHeight - childHeight;
    //定义缓动的距离
    var distance = 100;
    //最大可缓动的位置 就是初始位置再网上滑动的距离
    var maxSwipe = maxY + distance;
    //最小可缓动的距离 就是最小的位置再往下滑动的距离
    var minSwipe = minY - distance;

    //定义触摸时的初始值
    var startY = 0;
    var moveY = 0;
    var distanceY = 0;
    var isMove = false;
    var currY = 0;//用来记录上一次的位置

    //定义公用函数

    //添加过渡
    var addTransition = function () {
        childBox.style.transition = "all .2s";
        childBox.style.webkitTransition = "all .2s";
    }
//添加过渡
    var removeTransition = function () {
        childBox.style.transition = "none";
        childBox.style.webkitTransition = "none";
    }
    //设置定位 y轴移动
    var setTranslateY = function (y) {
        childBox.style.transform = "translateY(" + y + "px)";
        childBox.style.webkitTransform = "translateY(" + y + "px)";
    }


    //绑定监听事件
    childBox.addEventListener('touchstart', function (e) {
        startY = e.touches[0].clientY;
        //console.log(startY);

    });
    childBox.addEventListener('touchmove', function (e) {
        moveY = e.touches[0].clientY;
        distanceY = moveY - startY;

        removeTransition();//当滑动的时候，要清除过渡效果
        //当滑动的位置在区间内 可以滑动
        if ((currY + distanceY) < maxSwipe && (currY + distanceY) > minSwipe) {
            setTranslateY(distanceY + currY);
        }

    });
    window.addEventListener('touchend', function (e) {
        if ((currY + distanceY) > maxY) { //如果滑动的距离超过最大值，就是上面的空白区 让其返回0的位置
            currY = maxY
            addTransition();
            setTranslateY(currY);
        } else if ((currY + distanceY) < minY) { //如果滑动的距离小于最小值，就是下面的空白区，让其返回最小值的位置
            currY = minY;
            addTransition();
            setTranslateY(currY);
        } else {
            currY = currY + distanceY; //如果以上2个情况都没有，就是在可视区域内滑动
        }
        //参数重置  curry不能重置
        startY = 0;
        moveY = 0;
        distanceY = 0;
        isMove = 0;
    });

//绑定tap
    var isMove = false; //初始是没有移动
    startTime = 0;//定义当前时间为0

    var lis = childBox.querySelectorAll('li');//获取所有的li
    childBox.addEventListener("touchstart", function () {
        startTime = Date.now(); //滑动时的时间
    });
    childBox.addEventListener("touchmove", function () {
        isMove = true; //如果移动了，就不会进入下面的程序
    });
    childBox.addEventListener("touchend", function (e) {
        //当鼠标触摸离开，判断，如果没有移动，并且停留时间小于150 就判定为点击事件，执行以下程序
        if (!isMove && (Date.now() - startTime) < 150) {
            // 触发事件源的对象 就是a标签的父元素 li
            var li = e.target.parentNode;
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
                lis[i].index = i;
            }
            li.className = "now"; //点击时，添加高亮

            var translateY = -li.index * 50; //移动的距离 就是当前li的索引乘以li的宽度
            if (translateY > minY) {//如果移动的距离大于最小距离
                currY = translateY;
                addTransition();
                setTranslateY(currY);
            } else {
                currY = minY;
                addTransition();
                setTranslateY(currY);
            }
        }
    })
}


/*右侧内容*/
function rightSwipe() {
    /*通过封装的swipe插件来实现*/
    itcast.iScroll({
        swipeDom: document.querySelector('.jd_category_right'), /*父容器对象*/
        swipeType: 'y', /*滑动的方向*/
        swipeDistance: 100/*缓冲的距离*/
    });
}